import {View} from '@tarojs/components'
import react, {Component} from 'react'
import { Search, Swiper, SwiperItem, Image} from '@antmjs/vantui'
import './index.less'
import GoodsItem from "../../components/goods-item/GoodsItem";
import HotItem from "../../components/hot-item/HotItem";
import ZWXTabBar from "../../components/zwx-tabbar/ZWXTabBar";
import {inject, observer} from "mobx-react";

export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      initPage1: 0,
      height: 180,
      images: [
        'https://img.mall4j.com/2024/06/9e78c089467f4778a38b976a930d730e.png',
        'https://img.mall4j.com/2024/06/d788b713e4d24bcf86b4d31834ed2797.png',
      ],
      goods: [
        {
          takedown: false,
          image: 'https://img.mall4j.com/2024/06/eed0882a65084fd9a88a901b0186baf3.jpg',
          title: '2瓶装 |【春夏柚香清透】松山油脂 M-mark 柚子轻盈润肤露 身体乳 300毫升',
          desc: '【日本乐天市场直供】应对干燥季节的各项皮肤问题，质地轻薄易涂抹易吸收，散发着淡淡的柚子果香，而且大瓶装超实惠，用完一次就无限回购的御用身体乳。',
          price:'200.05',
        },
        {
          takedown: true,
          image: 'https://img.mall4j.com/2024/06/eed0882a65084fd9a88a901b0186baf3.jpg',
          title: '2瓶装 |【春夏柚香清透】松山油脂 M-mark 柚子轻盈润肤露 身体乳 300毫升',
          desc: '【日本乐天市场直供】应对干燥季节的各项皮肤问题，质地轻薄易涂抹易吸收，散发着淡淡的柚子果香，而且大瓶装超实惠，用完一次就无限回购的御用身体乳。',
          price:'200.05',
        },
        {
          takedown: false,
          image: 'https://img.mall4j.com/2024/06/eed0882a65084fd9a88a901b0186baf3.jpg',
          title: '2瓶装 |【春夏柚香清透】松山油脂 M-mark 柚子轻盈润肤露 身体乳 300毫升',
          desc: '【日本乐天市场直供】应对干燥季节的各项皮肤问题，质地轻薄易涂抹易吸收，散发着淡淡的柚子果香，而且大瓶装超实惠，用完一次就无限回购的御用身体乳。',
          price:'200.05',
        },
        {
          takedown: false,
          image: 'https://img.mall4j.com/2024/06/eed0882a65084fd9a88a901b0186baf3.jpg',
          title: '2瓶装 |【春夏柚香清透】松山油脂 M-mark 柚子轻盈润肤露 身体乳 300毫升',
          desc: '【日本乐天市场直供】应对干燥季节的各项皮肤问题，质地轻薄易涂抹易吸收，散发着淡淡的柚子果香，而且大瓶装超实惠，用完一次就无限回购的御用身体乳。',
          price:'200.05',
        },
        {
          takedown: false,
          image: 'https://img.mall4j.com/2024/06/eed0882a65084fd9a88a901b0186baf3.jpg',
          title: '2瓶装 |【春夏柚香清透】松山油脂 M-mark 柚子轻盈润肤露 身体乳 300毫升',
          desc: '【日本乐天市场直供】应对干燥季节的各项皮肤问题，质地轻薄易涂抹易吸收，散发着淡淡的柚子果香，而且大瓶装超实惠，用完一次就无限回购的御用身体乳。',
          price:'200.05',
        },
        {
          takedown: false,
          image: 'https://img.mall4j.com/2024/06/eed0882a65084fd9a88a901b0186baf3.jpg',
          title: '2瓶装 |【春夏柚香清透】松山油脂 M-mark 柚子轻盈润肤露 身体乳 300毫升',
          desc: '【日本乐天市场直供】应对干燥季节的各项皮肤问题，质地轻薄易涂抹易吸收，散发着淡淡的柚子果香，而且大瓶装超实惠，用完一次就无限回购的御用身体乳。',
          price:'200.05',
        },
        {
          takedown: false,
          image: 'https://img.mall4j.com/2024/06/eed0882a65084fd9a88a901b0186baf3.jpg',
          title: '2瓶装 |【春夏柚香清透】松山油脂 M-mark 柚子轻盈润肤露 身体乳 300毫升',
          desc: '【日本乐天市场直供】应对干燥季节的各项皮肤问题，质地轻薄易涂抹易吸收，散发着淡淡的柚子果香，而且大瓶装超实惠，用完一次就无限回购的御用身体乳。',
          price:'200.05',
        }
      ],
      hots: [
        {
          mainTitle: '每日上新',
          subTitle: '试新盒子 抽新品',
          goodsItems: [
            {
              image:'https://img.mall4j.com/2024/06/9d0c3e4b46e14282803da0b04fbd4340.jpg',
              price:'200',
            },
            {
              image:'https://img.mall4j.com/2024/06/9d0c3e4b46e14282803da0b04fbd4340.jpg',
              price:'200',
            }
          ]
        },{
          mainTitle: '热销TOP',
          subTitle: '爆款好物 趁早买',
          goodsItems: [
            {
              image:'https://img.mall4j.com/2024/06/9d0c3e4b46e14282803da0b04fbd4340.jpg',
              price:'200',
            },
            {
              image:'https://img.mall4j.com/2024/06/9d0c3e4b46e14282803da0b04fbd4340.jpg',
              price:'200',
            }
          ]
        }
      ]
    }
  }

  render(){
    const {height,initPage1,hots,goods,images} = this.state;
    return (
      <View className='index'>
        <View className='index-header' >
          <View className='header-component' >
            <Search placeholder='当前热搜：iPadMini' background='transparent' shape='round' />
            <View className='header-swiper-container' >
              <Swiper
                height={height}
                paginationColor='#426543'
                autoPlay='3000'
                initPage={initPage1}
                paginationVisible
                style={{borderRadius: 12}}
              >
                {images.map((item, index) => (
                  <SwiperItem key={`swiper#demo1${index}`}>
                    <Image src={item} fit='cover' width='100%' height={`${height}px`} />
                  </SwiperItem>
                ))}
              </Swiper>
            </View>
          </View>
          <View className='header-background'></View>
        </View>

        <View className='hot-area'>
          {hots && hots.map((item,index)=>{
            return <HotItem key={index} {...item}></HotItem>
          })}
        </View>

        <View className='goods-container'>
          {goods.map((item, _index) => {
            return <GoodsItem key={_index} {...item} />
          })}
        </View>

        <ZWXTabBar {...this.props} />
      </View>
    )
  }
}
